<script setup>

import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import axios from "axios";
import {ElMessage} from "element-plus";
import {exportTable1} from "@/utils/utils1";


const dateType=ref('1')
const selectedYear=ref()
const selectedMonth=ref()
const selectedDay=ref()


const total=ref('')//页面查询记录总数


const tableData = ref([])//后端返回的分页查找的数据

const pageNum=ref(1) //默认当前页为1
const pageSize=ref(5)//默认每页数据显示5条
const loadPage=(pageNum,pageSize)=>{//加载分页查询结果
  axios.get(getBaseURL(3)+'/v1/bill/pageSelect/'+pageNum+'/'+pageSize)//传给后端  后端进行查询
      .then(response=>{
        if(response.data.code===2000)
        {
          tableData.value=response.data.data;
        }
        else {
          ElMessage.error(response.data.msg);
        }
      })

}
const handleSizeChange = val => {
  pageNum.value=val;
  loadPage(pageNum,pageSize);
  console.log(`每页：${val}条 `);
};

const handleCurrentChange = val => {
  pageSize.value=val;
  loadPage(pageNum,pageSize);
  console.log(`当前页: ${val}`);
};

//下载表格函数
const exportTableData1 = () => {
  const elt = document.getElementById("statisticsTable");
  if (elt) {
    exportTable1(elt, "账单统计表", "账单导出表", 1);
  } else {
    console.error("Element with id 'statisticsTable' not found.");
  }
};
const downloadTips=()=>{
  if(confirm("是否导出该页面数据？"))
  {
    exportTableData1();
  }
  else {
    ElMessage.error("已取消下载！")
  }
}


</script>

<template>
  <el-row>
    <el-col :span="1"></el-col>
    <el-col :span="22" >
      <el-row :gutter="200" style="height: 50px;">
        <el-col :span="5">
          <span style="font-weight: bold;line-height: 50px">复印费用统计</span>
        </el-col>
        <el-col :span="19">
          <el-form  style="margin-left: 630px">
            <el-form-item>

              <span  style="font-weight: bold; line-height: 50px; margin-right:  10px;">时间类型</span>

              <!-- 按钮组，用于选择日期类型 -->
              <el-radio-group v-model="dateType" style="margin-right: 10px;">
                <el-radio-button  value="1">日</el-radio-button>
                <el-radio-button  value="2">月</el-radio-button>
                <el-radio-button  value="3">年</el-radio-button>
              </el-radio-group>

              <!-- 根据 dateType 显示不同的日期选择器 -->
              <el-date-picker
                  v-if="dateType === '1'"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  v-model="selectedDay">
              </el-date-picker>

              <el-date-picker
                  v-else-if="dateType === '2'"
                  type="month"
                  placeholder="选择月份"
                  value-format="yyyy-MM"
                  v-model="selectedMonth">
              </el-date-picker>

              <el-date-picker
                  v-else-if="dateType === '3'"
                  type="year"
                  placeholder="选择年份"
                  value-format="yyyy"
                  v-model="selectedYear">
              </el-date-picker>


              <!--              按钮-->
              <el-button type="primary" plain style="margin-left: 10px;" @click="downloadTips"><el-icon><Download /></el-icon>下载</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <hr style="height: 1px;background-color: #f1f1f1;border:none">
      <el-table :data="tableData" style="width: 100%" id="statisticsTable">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="copyAmount" label="复印金额" width="180" />
        <el-table-column prop="copyRefund" label="复印退款" />
        <el-table-column prop="operate" label="操作" />
        <!--        prop对应后端中vo的字段-->
      </el-table>
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-left: 800px"
      />
    </el-col>
    <el-col :span="1"></el-col>
  </el-row>
</template>

<style scoped>

</style>
